<template>
  <div class="switch">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="媒体水利" name="/media">
        <router-view @media="media"></router-view>
      </el-tab-pane>
      <el-tab-pane label="行业动态" name="/industry" lazy>
        <router-view name="Industry" @industry="industry"></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "ContentSwitch",
  data() {
    return {
      activeName: "/media",
    };
  },
  methods: {
    handleClick(tab) {
      console.log(tab.name);
      this.$router.replace(tab.name);
    },
    industry(destroy) {
      this.$emit("industry", destroy);
    },
    media(destroy) {
      this.$emit("media", destroy);
    },
  },
};
</script>
<style>
/* 切换框组件 */
.switch {
  background: white;
  margin-bottom: 0.32rem;
}
/* 选中后下方条 */
.el-tabs__active-bar {
  color: #084fb0 !important;
  background-color: #084fb0 !important;
}
/* 选中后字体 */
.el-tabs__item.is-active {
  color: #084fb0 !important;
}
/* 切换框上放字体 */
.el-tabs__item {
  font-size: 0.72rem !important;
  padding-left: 0.8rem !important;
  padding-bottom: 1.7rem !important;
  padding-top: 0.8rem !important;
}
</style>
